<template>
  <view>
    <u-navbar title="补充个人信息">
    </u-navbar>
    <view class="userInfo-counter">
      <u--form labelPosition="left" :model="userInfoForm" labelWidth="100">
        <u-form-item label="姓名" prop="userInfoForm.name" borderBottom>
          <u--input
            v-model="userInfoForm.name"
            border="none"
            placeholder="请输入姓名"
          ></u--input>
        </u-form-item>
        <u-form-item label="图像" prop="userInfoForm.name" borderBottom>
          <view class="items-img" v-if="userInfoForm.avatar">
            <image
              class="avatar-image"
              src="https://cdn.uviewui.com/uview/album/1.jpg"
              alt=""
            />
            <view class="close-icon" @click="handleDeleteImage(index)">
              <u-icon
                name="close-circle-fill"
                size="22"
                color="#da5947"
              ></u-icon>
            </view>
          </view>
          <text
            v-else
            class="iconfont icon-icon-upload_img"
            @click="handleUploadImage(1)"
          ></text>
        </u-form-item>
        <u-form-item label="身份证号" prop="userInfoForm.idCard" borderBottom>
          <u--input
            v-model="userInfoForm.idCard"
            border="none"
            placeholder="请输入身份证号"
          ></u--input>
        </u-form-item>
        <u-form-item label="身份证正面" prop="userInfoForm.name" borderBottom>
          <view class="items-img" v-if="userInfoForm.avatar">
            <image
              class="avatar-image"
              src="https://cdn.uviewui.com/uview/album/1.jpg"
              alt=""
            />
            <view class="close-icon" @click="handleDeleteImage(index)">
              <u-icon
                name="close-circle-fill"
                size="22"
                color="#da5947"
              ></u-icon>
            </view>
          </view>
          <text
            v-else
            class="iconfont icon-icon-upload_img"
            @click="handleUploadImage(2)"
          ></text>
        </u-form-item>
        <u-form-item
          label="身份证反面"
          prop="userInfoForm.idCardBack"
          borderBottom
        >
          <view class="items-img" v-if="userInfoForm.avatar">
            <image
              class="avatar-image"
              src="https://cdn.uviewui.com/uview/album/1.jpg"
              alt=""
            />
            <view class="close-icon" @click="handleDeleteImage(index)">
              <u-icon
                name="close-circle-fill"
                size="22"
                color="#da5947"
              ></u-icon>
            </view>
          </view>
          <text
            v-else
            class="iconfont icon-icon-upload_img"
            @click="handleUploadImage(3)"
          ></text>
        </u-form-item>
        <u-form-item label="手机号" prop="userInfoForm.phone" borderBottom>
          <u--input
            v-model="userInfoForm.phone"
            border="none"
            placeholder="请输入手机号"
          ></u--input>
        </u-form-item>
        <u-form-item label="常用住址" borderBottom @click="showAddress = true">
          <span v-if="userInfoForm.province">
            {{ userInfoForm.province }} {{ userInfoForm.city }}
            {{ userInfoForm.district }}
          </span>
          <span v-else>请选择</span>
        </u-form-item>
        <u-form-item label="详细住址" borderBottom>
          <u--input
            v-model="userInfoForm.permanentAddress"
            border="none"
            placeholder="请输入常用地址"
          ></u--input>
        </u-form-item>
      </u--form>

      <view class="submit-button" @click="handleSubmit">提交</view>

      <!-- 相机拍摄防范 -->
      <u-popup
        duration="0"
        :round="10"
        :show="showPicture"
        @close="showPicture = false"
      >
        <view class="picture-counter-popup">
          <view class="popup-bottom-main" @click="handleShootPicture('1')"
            >拍摄照片</view
          >
          <view class="popup-bottom-main" @click="handleShootPicture('2')"
            >从手机相册选择</view
          >
          <view class="border"></view>
          <view
            class="popup-bottom-main cancel-btn"
            @click="showPicture = false"
            >取消</view
          >
        </view>
      </u-popup>

      <!-- 地址联动 -->
      <u-popup :show="showAddress" mode="bottom" round="12">
        <view class="popDiv">
          <view class="bg-primary-lighten py-3 d-flex justify-center pop-Tit">
            <view>
              <u--text
                text="请选择所在地区"
                color="#000"
                :bold="true"
                size="16"
              ></u--text>
            </view>
            <u-icon
              name="close"
              color="#000"
              style="position: absolute; right: 20rpx"
              size="22"
              @click="showAddress = false"
            >
            </u-icon>
          </view>
          <view class="pa-4">
            <view class="d-flex mb-2">
              <text
                class="font-bold font-14 px-2 mr-2"
                @click="showProvinceFunc"
                >{{
                  userInfoForm.province ? userInfoForm.province : "选择省份"
                }}</text
              >
              <text class="font-bold font-14 px-2 mr-2" @click="showCityFunc">{{
                userInfoForm.city ? userInfoForm.city : "选择城市"
              }}</text>
              <text class="font-bold font-14 px-2" @click="showCountyFunc">{{
                userInfoForm.district ? userInfoForm.district : "选择区/县"
              }}</text>
            </view>
            <view class="popList" v-show="addressObj.showProvince">
              <view
                v-for="(pitem, pidx) in cityData"
                :key="pidx"
                class="pa-2 mb-2"
                @click="getCity(pitem)"
              >
                <text
                  class="font-14"
                  :class="
                    pitem.name == userInfoForm.province
                      ? 'color-primary font-bold'
                      : ''
                  "
                  >{{ pitem.name }}</text
                >
              </view>
            </view>
            <view class="popList" v-show="addressObj.showCity">
              <view
                v-for="(pitem, pidx) in addressObj.citylist"
                :key="pidx"
                class="pa-2 mb-2"
                @click="getCounty(pitem)"
              >
                <text
                  class="font-14"
                  :class="
                    pitem.name == userInfoForm.city
                      ? 'color-primary font-bold'
                      : ''
                  "
                  >{{ pitem.name }}</text
                >
              </view>
            </view>
            <view class="popList" v-show="addressObj.showCounty">
              <view
                v-for="(pitem, pidx) in addressObj.countylist"
                :key="pidx"
                class="pa-2 mb-2"
                @click="complateAddress(pitem)"
              >
                <text
                  class="font-14"
                  :class="
                    pitem.name == userInfoForm.district
                      ? 'color-primary font-bold'
                      : ''
                  "
                  >{{ pitem.name }}</text
                >
              </view>
            </view>
          </view>
        </view>
      </u-popup>
    </view>
  </view>
</template>

<script>
import { uploadImageFile, getRegionalTreeData } from "../../api/public";
import { signUserInfo } from "../../api/auth";
import QQMapWx from "../../utils/qqmap-wx-jssdk";
export default {
  data() {
    return {
      userInfoForm: {
        avatar: "",
        idCardFront: "",
        idCardBack: "",
      },
      showPicture: false,
      showAddress: false,
      cityData: [],
      addressObj: {
        show: false,
        provincelist: "",
        citylist: "",
        countylist: "",
        showProvince: true,
        showCity: false,
        showCounty: false,
      },
      location: {},
      qqmapsdk: null,
      uploadType: 1,
    };
  },
  onLoad() {
    this.qqmapsdk = new QQMapWx({
      key: "VIZBZ-4SQWU-RSMV4-GM7IH-XBBFE-T6BV4",
    });
  },
  mounted() {
    this.getRegionalTreeData();
  },
  methods: {
    handleUploadImage(type) {
      // type 1: 头像 2: 身份证正面 3: 身份证反面
      this.showPicture = true;
      this.uploadType = type;
    },

    async handleSubmit() {
      if (!this.userInfoForm.name) {
        return uni.showToast({
          title: "请填写您的名称",
          icon: "none",
        });
      }
      if (!this.userInfoForm.avatar) {
        return uni.showToast({
          title: "请上传您的头像",
          icon: "none",
        });
      }
      if (!this.userInfoForm.idCard) {
        return uni.showToast({
          title: "请填写您的身份证号",
          icon: "none",
        });
      }
      if (!this.userInfoForm.idCardFront) {
        return uni.showToast({
          title: "请上传您的身份证正面照片",
          icon: "none",
        });
      }
      if (!this.userInfoForm.idCardBack) {
        return uni.showToast({
          title: "请上传您的身份证反面照片",
          icon: "none",
        });
      }
      if (!this.userInfoForm.phone) {
        return uni.showToast({
          title: "请填写您的手机号码",
          icon: "none",
        });
      }

      try {
        await signUserInfo({
          masterRegisterVO: { ...this.userInfoForm },
        });
        uni.showToast({
          title: `提交成功`,
          icon: "none",
        });
        uni.navigateTo({
          url: "/pages/home/index",
        });
      } catch (e) {
        console.log(e);
      }
    },

    handleShootPicture(type) {
      let that = this;
      uni.chooseImage({
        sourceType: type == "1" ? ["camera"] : ["album"],
        success: async (res) => {
          try {
            const filePath = res.tempFilePaths[0];
            const files = res.tempFiles[0];
            const resData = await uploadImageFile(filePath, files);
            const photoType =
              this.uploadType == 1
                ? "avatar"
                : this.uploadType == 2
                ? "idCardFront"
                : "idCardBack";
            this.$set(this.userInfoForm, photoType, resData.data);
          } catch (err) {
            console.log(err);
          }
        },
      });
    },

    // 获取地区树状数据
    async getRegionalTreeData() {
      try {
        const res = await getRegionalTreeData();
        this.cityData = res.data;
      } catch (err) {
        console.log(err);
      }
    },
    showProvinceFunc() {
      this.addressObj.showCity = false;
      this.addressObj.showProvince = true;
      this.addressObj.showCounty = false;
    },
    showCityFunc() {
      this.addressObj.showCity = true;
      this.addressObj.showProvince = false;
      this.addressObj.showCounty = false;
    },
    showCountyFunc() {
      this.addressObj.showCity = false;
      this.addressObj.showProvince = false;
      this.addressObj.showCounty = true;
    },
    getCity(item) {
      this.addressObj.citylist = item.children;
      this.userInfoForm.city = "";
      this.userInfoForm.district = "";
      this.userInfoForm.province = item.name;
      this.location.provincelocation = item.id;
      this.showCityFunc();
    },
    getCounty(item) {
      this.addressObj.countylist = item.children;
      this.userInfoForm.city = item.name;
      this.location.citylocation = item.id;
      this.userInfoForm.district = "";
      this.showCountyFunc();
    },

    complateAddress(item) {
      this.userInfoForm.district = item.name;
      this.location.districtlocation = item.id;
      this.userInfoForm.location = Object.values(this.location).join(",");
      this.addressObj.show = false;
      const { province, city, county } = this.userInfoForm;
      const _this = this;
      this.qqmapsdk.geocoder({
        address: province + city + county,
        success(res) {
          console.log(res, "success");
          const { lat, lng } = res?.result?.location;
          _this.userInfoForm.latitude = lat;
          _this.userInfoForm.longitude = lng;
        },
        fail: function (error) {
          console.error(error);
        },
        complete: function (res) {
          console.log(res);
        },
      });
    },
  },
};
</script>

<style scoped>
::v-deep .u-navbar__content__left {
  display: none;
}
</style>
<style lang="scss" scoped>
.userInfo-counter {
  padding: 24rpx;
  background: #fff;
  height: 100vh;
  margin-top: 90rpx;
  box-sizing: border-box;
  .avatar-image {
    width: 160rpx;
    height: 160rpx;
    border-radius: 10rpx;
  }
  .icon-icon-upload_img {
    color: #e5e5e5;
    font-size: 156rpx;
  }

  .picture-counter-popup {
    .popup-bottom-main {
      text-align: center;
      padding: 30rpx 0;
      font-size: 30rpx;
      color: #000;
      border-bottom: 2rpx solid #f3f3f3;
      &:last-child {
        border: none;
      }
    }
    .cancel-btn {
      border: none;
    }
    .border {
      height: 26rpx;
      background: #f6f6f6;
      width: 100%;
    }
  }
  .handle_none {
    display: none;
  }

  .items-img {
    position: relative;
    .close-icon {
      position: absolute;
      right: -8px;
      top: -8px;
    }
  }
  .submit-button {
    padding: 24rpx;
    border-radius: 50rpx;
    background: #579af8;
    text-align: center;
    color: #fff;
    font-size: 28rpx;
    margin-top: 30rpx;
  }
  .popDiv {
    height: 400px;
  }
}
</style>
